<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Simple DOM example</title>
    <style>
    .highlight {
        color: white;
        background-color: black;
        padding: 10px;
        width: 250px;
        text-align: center;
    }
    </style>
</head>

<body>
    <section>
        <img src="img/dinosaur.png">
        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
    </section>
    <script>
    var link = document.querySelector('a');
    link.textContent = 'Mozilla Developer Network';
    link.href = 'https://developer.mozilla.org';
    var sect = document.querySelector('section');
    var para = document.createElement('p');
    para.textContent = 'We hope you enjoyed the ride.';
    sect.appendChild(para);
    var text = document.createTextNode(' — the premier source for web development knowledge.');
    var linkPara = document.querySelector('p');
    linkPara.appendChild(text);
    sect.appendChild(linkPara);
    para.setAttribute('class', 'highlight');
    </script>
</body>

</html>